<template>
  <div :class="{'select-tree': true, 'select-tree-focus': isFocus}">
    <el-popover
      ref="popover2"
      placement="bottom"
      width="150"
      trigger="click"
      @hide="inputBlur"
      >
      <el-tree
        ref='tree'
        :data="data2"
        show-checkbox
        node-key="id"
        @check-change='treeSelectChange'
        >
      </el-tree>
    </el-popover>
    <div v-popover:popover2 @focus="inputFocus" class="select-tags">
      <span v-show="!tagText" class="tag-placeholder">请选择</span>
      <div class="el-tag" v-show="tagText"><span>{{tagText}}</span><i @click.stop = 'setCheckedNodesArr' class="el-tag__close el-icon-close"></i></div>
      <div class="el-tag" v-show="tagLength > 0"><span>+{{tagLength}}</span></i></div>
    </div>
  </div>
</template>
<script>
  import { deepClone } from '@/utils/m7Utils'
  export default {
    name: 'select-tree',
    components: {},
    props: {
      model: Array
    },
    data () {
      return {
         data2: [{
           id: 'normal',
           label: '普通来电',
          }, {
            id: 'dialout',
            label: '外呼去电',
          }, {
            id: 'transfer',
            label: '来电转接',
            children: [
              {
                id: 'transferToAgent',
                label: '我转出给座席'
              }, {
                id: 'transferToOut',
                label: '我转出给外线'
              }, {
                id: 'transferToMe',
                label: '座席转入给我'
              }
            ]
         }, {
            id: 'dialTransfer',
            label: '外呼转接',
            children: [
              {
                id: 'dialTransferToAgent',
                label: '我转出给座席'
              }, {
                id: 'dialTransferToOut',
                label: '我转出给外线'
              }, {
                id: 'dialTransferToMe',
                label: '座席转入给我'
              }
            ]
          }],
          isFocus: false,
          tagText: '',
          tagLength: 0
       }
    },
    watch: {
      
    },
    methods: {
      inputFocus () {
        // this.setCheckedNodes();
        this.isFocus = true;
      },
      inputBlur () {
        // console.log(this.$refs.tree.getCheckedKeys());
        this.isFocus = false;
      },
      treeSelectChange (data) {
        let type = this.$refs.tree.getCheckedKeys()[0];
        let text = ''
        if (type) {
          this.data2.forEach((obj, index) => {
            if (type === obj.id) {
              text = obj.label
            }
            if (obj.children) {
              obj.children.forEach((cObj, cIndex) => {
                 if (type === cObj.id) {
                   text = cObj.label
                 }
              })
            }
          })
        }
        this.tagText = text
        this.filterSelectArray()
        this.getTagLength()
      },
      filterSelectArray () {
        let arr = this.$refs.tree.getCheckedKeys()
        this.data2.forEach((obj, index) => {
          arr.forEach((id)=>{
            if (id === obj.id) {
              if (obj.children) {
                obj.children.forEach((cObj, cIndex) => {
                  arr = arr.filter((fId) => {
                    if (cObj.id === fId) {
                      return false
                    } else {
                      return true
                    }
                  })
                })
              }
            }
          })
        })
        this.$emit('change', arr, 'CONNECT_TYPE')
      },
      setCheckedNodesArr () {
        let arr = this.getDelArr()
        arr.shift()
        this.$refs.tree.setCheckedKeys(arr)
        this.treeSelectChange()
      },
      getTagLength () {
        let arr = this.$refs.tree.getCheckedKeys()
        this.data2.forEach((obj, index) => {
          arr.forEach((id)=>{
            if (id === obj.id) {
              if (obj.children) {
                arr = arr.filter((fId) => {
                  if (fId === obj.id) {
                    return false
                  } else {
                    return true
                  }
                })
              }
            }
          })
        })
        this.tagLength = (arr.length - 1)
      },
      getDelArr () {
        let arr = this.$refs.tree.getCheckedKeys()
        this.data2.forEach((obj, index) => {
          arr.forEach((id)=>{
            if (id === obj.id) {
              if (obj.children) {
                arr = arr.filter((fId) => {
                  if (fId === obj.id) {
                    return false
                  } else {
                    return true
                  }
                })
              }
            }
          })
        })
        return deepClone(arr)
      }
    },
    mounted () {
     
    },
    beforeDestroy: function () {
      
    },
    beforeMount () {
      
    },
    watch: {
      model (data) {
        if (data.length <= 0) {
          this.tagLength = 0
          this.tagText = ''
          this.$refs.tree.setCheckedKeys([])
        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .select-tree
    height: 28px;
    line-height: 28px;
    color: #000;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    width: 100%;
    padding: 0 10px 0;
    display: flex;
    align-items center;
  .select-tree-focus
    border:1px solid #459ae9;
  .select-tags
    .tag-placeholder
      font-size 12px;
      color #878787;
    -webkit-user-select:none;
    width 100%;
    display flex;
    align-items center;
    height: 80%;
    .el-tag
      margin-right 3px;
      height 100%;
      display flex;
      flex-direction row;
      align-items center;
      background-color: #f4f4f5;
      border-color: #e9e9eb;
      color: #909399;
      .el-tag__close:hover
        background-color #C0C4CC;        
      .el-icon-close
        color: #909399;
</style>
